<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="信息搜索">
						<el-input v-model="state.param.keyword" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon> 重 置
						</el-button>
						<el-button type="primary" @click="onOpenAddMenu()">
							<el-icon>
								<ele-Plus />
							</el-icon> 新 增
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-row class="mb10">
						<el-col class="contentMenuBox">
							<el-dropdown class="mr15">
								<el-button>
									批量操作&nbsp;<el-icon> <ele-ArrowDown /></el-icon>
								</el-button>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item @click="selectCoupon()">发放优惠券</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
							<el-button>
								<el-icon>
									<ele-Download />
								</el-icon> 导 出
							</el-button>
						</el-col>
					</el-row>
					<el-table :data="state.tableData" @selection-change="handleSelectionChange" >
						<el-table-column type="selection" width="55" />
						<el-table-column label="ID" show-overflow-tooltip>
							<template #default="scope">
								<span>{{ scope.row.userId }}</span>
							</template>
						</el-table-column>
						<el-table-column label="头像" show-overflow-tooltip>
							<template #default="scope">
								<el-image class="borderRadius5" style="width:32px; height: 32px;" 
									:src="scope.row.avatar" fit="cover" />
							</template>
						</el-table-column>
						<el-table-column prop="nickName" label="昵称" ></el-table-column>
						<el-table-column label="性别" show-overflow-tooltip>
							<template #default="scope">
								<span>字段缺失</span>
							</template>
						</el-table-column>
						<el-table-column label="年龄" show-overflow-tooltip>
							<template #default="scope">
								<span>字段缺失</span>
							</template>
						</el-table-column>
						<el-table-column label="手机号" show-overflow-tooltip>
							<template #default="scope">
								{{ scope.row.phone }}
							</template>
						</el-table-column>
						<el-table-column label="会员等级" show-overflow-tooltip>
							<template #default="scope">
								<span>字段缺失</span>
							</template>
						</el-table-column>
						<el-table-column label="付费会员" show-overflow-tooltip>
							<template #default="scope">
								<span>字段缺失</span>
							</template>
						</el-table-column>
						<el-table-column label="综合消费" show-overflow-tooltip>
							<template #default="scope">
								<span>字段缺失</span>
							</template>
						</el-table-column>
						<el-table-column label="年度消费" show-overflow-tooltip>
							<template #default="scope">
								<span>字段缺失</span>
							</template>
						</el-table-column>
						<el-table-column label="储值余额" show-overflow-tooltip>
							<template #default="scope">
								<span>字段缺失</span>
							</template>
						</el-table-column>
						<el-table-column label="综合欠款" show-overflow-tooltip>
							<template #default="scope">
								<span>字段缺失</span>
							</template>
						</el-table-column>
						<el-table-column label="积分" show-overflow-tooltip>
							<template #default="scope">
								{{ scope.row.storeId }}
							</template>
						</el-table-column>
						<el-table-column label="归属员工" show-overflow-tooltip>
							<template #default="scope">
								<span>字段缺失</span>
							</template>
						</el-table-column>
						<el-table-column label="归属门店" show-overflow-tooltip>
							<template #default="scope">
								{{ scope.row.storeId }}
							</template>
						</el-table-column>
						<el-table-column label="操作" show-overflow-tooltip width="140">
							<template #default="scope">
								<el-button  text type="primary" @click="onOpenAddMenu('add')">详情</el-button>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<couponSelect @couponSubmitFun="couponSubmitFun" ref="couponSelectRef" />
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
const couponSelect = defineAsyncComponent(() => import('/@/components/dialog/couponSelect.vue'));
// 定义变量内容
const couponSelectRef = ref();
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
import { tUserList } from '/@/api/member';
import { sendCoupon } from '/@/api/marketing';
import { ElMessageBox, ElMessage, ElTable } from 'element-plus';

// 引入组件

// 定义变量内容
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const menuDialogRef = ref();
const state = reactive({
	param: {
		keyword: "",
		pageNum: 1,
		pageSize: 10,  //这样就可以了， 但是这个不是自动切换得嘛 上面绑定了值
	},
	tableData: [] as Array<any>,
	selectUseList: [] as Array<any>,
	total:0,
	loading: true,
});

// 获取路由数据，真实请从接口获取
const getTableData = async () => {
	state.loading = true;
	const { results } = await tUserList(state.param);
	state.loading = false;
	state.tableData = results.records;
	state.total = results.total;
	state.loading = false;
};

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getTableData();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getTableData();
};

// 打开新增菜单弹窗
const onOpenAddMenu = (type: string) => {
	menuDialogRef.value.openDialog(type);
};


//优惠券选择
const selectCoupon = () => {
	if(state.selectUseList.length == 0){
		return ElMessage.warning('请选择会员');
	}else{
		couponSelectRef.value.openDialog();
	}
}

const couponSubmitFun = (list: any) =>{
	let useList  = state.selectUseList.map((item:any) => item.userId);
	let couponList = list.map((item:any) => {return {couponId: item.skuId,sendNumber:1}});
	if(couponList.length > 0){
		ElMessageBox.confirm(`确定发放优惠券吗?`, "温馨提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			draggable: true
		}).then(async () => {
			let params = {
				userIds: useList,
				couponSend: couponList,
			}
			const { method } = await sendCoupon(params);
			if(method == 'success'){
				ElMessage.success('发放成功');
				getTableData();
			}
		});
	}
}

const handleSelectionChange = (val:any) => {
	state.selectUseList = val
};

// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>
